<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>人员</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8" />
    <link rel="stylesheet" href="../../static/css/font.css" th:href="@{/css/font.css}">
    <link rel="stylesheet" href="../../static/css/xadmin.css" th:href="@{/css/xadmin.css}">
    <link rel="stylesheet" href="../../static/css/all-member.css" th:href="@{/css/all-member.css}">
    <style>
    </style>

</head>

<body>
    <div class="layui-fluid btn-nav">
        <div class="x-nav">
            <div class="layui-breadcrumb btn-collection">
                <button class="layui-btn layui-btn-xs layui-btn-normal" id="getSearchBox">
                    <i class="layui-icon">&#xe615;</i>查询
                </button>
                <!--<button class="layui-btn layui-btn-xs" onclick="xadmin.open('添加人员','./add-member.html',900,600)">-->
                <button class="layui-btn layui-btn-xs" data-type="add" id="addBtn">
                    <!--<button class="layui-btn layui-btn-xs" id="add-member">    -->
                    <i class="layui-icon">&#xe61f;</i>添加
                </button>
                <button class="layui-btn layui-btn-xs" data-type="delete" style="display: none;" id="deleteBtn">
                    <!--<button class="layui-btn layui-btn-xs" id="add-member">    -->
                    <i class="layui-icon">&#xe640;</i>删除
                </button>
                <!-- <button class="layui-btn layui-btn-xs layui-btn-danger" data-type="added">
                    <i class="layui-icon">&#xe640;</i>已添加
                </button>
                <button class="layui-btn layui-btn-xs layui-btn-danger" data-type="notAdded" style="display: none;">
                    <i class="layui-icon">&#xe640;</i>未添加
                </button> -->
                <select id="changeOption"
                    style="height: 30px;line-height: 30px;padding: 0px 10px;margin-left: 20px;position: relative;top: 5px;">
                    <option value="">未添加</option>
                    <option>已添加</option>
                </select>
            </div>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
                onclick="location.reload()" title="刷新">
                <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
            </a>
        </div>
    </div>
    <!--<div class="x-nav"></div>-->
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">

            <div class="layui-col-md12">

                <div class="layui-card">
                    <div class="layui-card-body ">
                        <div class="demoTable" style="display: none">
                            姓名：
                            <div class="layui-inline">
                                <input class="layui-input" name="keyword" id="demoReload1" autocomplete="off">
                            </div>
                            身份证:
                            <div class="layui-inline">
                                <input class="layui-input" name="keyword" id="demoReload2" autocomplete="off">
                            </div>
                            <button class="layui-btn" data-type="reload">查询</button>
                            <button class="layui-btn" data-type="clear">清空</button>
                        </div>
                        <table class="layui-hide" id="member-table" lay-filter="member">

                        </table>
                        <script type="text/html" id="operation-bar">
                        <button class="layui-btn layui-btn-xs  layui-btn-warm" lay-event="detail">
                            <i class="layui-icon">&#xe62d;</i>查看
                        </button>
                    </script>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../static/lib/layui/layui.js" charset="utf-8"
    th:src="@{/lib/layui/layui.js}"></script>
<script type="text/javascript" src="../../static/js/xadmin.js" th:src="@{/js/xadmin.js}"></script>
<script type="text/javascript" src="../../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script th:inline="NONE">
    console.log($('select'));
    console.log("当前id是:", window.location.href.match(/\=(.*)/));
    var href = window.location.href
    var trainingBatchId = (href.match(/\=(.*)/)[1]);
    var checkedMember = [];
    var table_data = [];
    var memberTable;
    // layer.load(0,{
    //     offset: (window.parent.parent.innerHeight / 2) + 'px'
    // });
    layui.use(['table', 'form', 'element', 'layer'], function () {
        var layer = layui.layer;

        var table = layui.table;

        // 显示/隐藏搜索框
        $("#getSearchBox").click(function () {
            if ($('.demoTable').css('display') == 'block') {
                $('.demoTable').css('display', 'none');
            } else {
                $('.demoTable').css('display', 'block');
            }
            // layer.msg("点击事件");
        });

        memberTable = table.render({
            elem: '#member-table'
            , url: '/v1/training/getNotInTrainingBatch?batchId=' + trainingBatchId
            , cols: [[
                { checkbox: true, fixed: true }
                , { field: 'name', title: '姓名', sort: true }
                , { field: 'gender', title: '性别' }
                , { field: 'idCardNum', title: '身份证' }
                , { field: 'educationalLevel', title: '文化程度', sort: true }
                , { field: 'nation', title: '民族' }
                , { field: '', title: '操作', toolbar: "#operation-bar" }
            ]]
            , id: 'testReload'
            , page: true
            , height: 600
            , done: function (res, curr, count) {
                table_data = res.data;
            }
        });

        var active = {
            reload: function () {
                var demoReload1 = $('#demoReload1');
                var demoReload2 = $('#demoReload2');
                table.reload('testReload', {
                    url: "/v1/user/searchUserLike",
                    where: {
                        // keyword:{}
                        name: demoReload1.val(),
                        idCardNum: demoReload2.val()
                    }, page: {
                        curr: 1
                    }
                });
            },
            clear: function () {
                $('#demoReload1').val('');
                $('#demoReload2').val('');
            },
            add: function () {
                console.log(checkedMember);
                var queryData = checkedMember.join(',');
                console.log(queryData);
                $.ajax({
                    url: '/v1/training/addUserTrainingRecord?trainingBatchId=' + trainingBatchId + '&userIdList=' + queryData,
                    type: 'POST',
                    success: function (res) {
                        console.log("成功了");
                        memberTable.reload();
                        layer.msg(res.msg);
                    }, error: function (res) {
                        console.log("失败了");
                        console.log(res.msg);
                    }
                })
            },
            delete: function () {
                var data = checkedMember;
                console.log("删除的内容", data);
                var queryData = data.join(',');
                layer.confirm('确认要删除吗？' + JSON.stringify(data), function (index) {
                    $.ajax({
                        url: '/v1/training/deleteUserTrainingRecord?userTrainingRecordIdList=' + queryData,
                        type: 'GET',
                        success: function (res) {
                            memberTable.reload();
                            layer.msg(res.msg);
                            layer.close(index);
                        }, error: function (res) {
                            layer.msg(res.msg);
                        }
                    })
                })
            }
        };


        $('#changeOption').on('change', function () {
            var selectText = $(this).find('option:selected').text();
            console.log(selectText);
            if (selectText === '已添加') {
                $("#addBtn").css('display', 'none');
                $("#deleteBtn").css('display', 'inline-block');
                table.reload('testReload', {
                    url: "/v1/training/selectUserTrainingRecord/1",
                    where: {
                        id: trainingBatchId
                    }, page: {
                        curr: 1
                    }
                });
            } else {
                $("#addBtn").css('display', 'inline-block');
                $("#deleteBtn").css('display', 'none');
                table.reload('testReload', {
                    url: "/v1/training/getNotInTranningBatch",
                    where: {
                        batchId: trainingBatchId
                    }, page: {
                        curr: 1
                    }
                });
            }
        })
        // 绑定事件
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //表格复选框选择
        table.on('checkbox(member)', function (obj) {
            console.log(obj);
            if (obj.checked == true) {
                if (obj.type === 'one') {
                    console.log(obj.data);
                    checkedMember.push(obj.data.id);
                } else {
                    for (var item of table_data) {
                        checkedMember.push(item.id);
                    }
                }
            } else {
                if (obj.type === 'one') {
                    for (var i = 0; i < checkedMember.length; i++) {
                        if (checkedMember[i] === obj.data.id) {
                            checkedMember.splice(i, 1);
                        }
                    }
                } else {
                    for (var i = 0; i < checkedMember.length; i++) {
                        for (var j = 0; j < table_data.length; j++) {
                            if (checkedMember[i] === table_data[j].id) {
                                checkedMember.splice(i, 1);
                            }
                        }
                    }
                }
            }
            // layer.msg(checkedMember);
            console.log(checkedMember);
        });

        //工具条
        table.on('tool(member)', function (obj) {
            var data = obj.data;
            var id = data.id;
            if (obj.event === 'detail') {
                layer.msg('ID：' + data.id + ' 的查看操作');
                layer.open({
                type: 2,
                content: 'check-member.html'+ "?id=" + id,
                title: '查看',
                area: ["800px", $(window).height() + 'px'],
                offset: '0px',
                success: function (layero, index) {
                    layer.iframeAuto(index);
                }
            })
                // showWindow('./check-member.html', '查看')
            }
            // else if (obj.event === 'edit') {
            //     EditUv(data);
            //     showWindow('./add-member.html', '编辑人员');
            // }
        });

    });


    // 编辑人员
    function EditUv(data) {
        console.log(data);
    }

    // 删除所选
    // function deleteSelected() {
    //     var data = checkedMember;
    //     layer.confirm('确认要删除吗？' + JSON.stringify(data), function () {

    //     })
    // }


</script>

</html>